Body Measurements Web

bodyMeasurementsWeb is a WEB template for users to fill in their body measurement data. Examples of that data are the current weight, current height, or the goal weight.

The template accepts two tabs to support showing both metric and imperial systems and a toggle to switch between tabs.

Example of a valid bodyMeasurementsWeb - current_height

{
    "type": "bodyMeasurementsWeb",
    "stepId": "body_measurements_current_height",
    "currentWeightKey": "current_height",
    "backgroundColor": "#ECEAFF",
    "textColor": "#14191D",
    "ctaText": "Continue",
    "ctaColor": "#FFF",
    "ctaBackgroundColor": "#251C93",
    "title": "Your current weight",
    "inputPlaceholderColor": "#BBB4FF",
    "inputTextColor": "#251C93",
    "shouldFadeIn": false,
    "tabs": {
        "Imperial": [
            {
                "placeholder": "Current height",
                "inputSuffix": "ft",
                "toggleKey": "Imperial",
                "isMetricSystem": false
            },
            {
                "placeholder": "Current height",
                "inputSuffix": "in",
                "toggleKey": "Imperial",
                "isMetricSystem": false
            }
        ],
        "Metric": [
            {
                "placeholder": "Current height",
                "inputSuffix": "cm",
                "toggleKey": "Metric",
                "isMetricSystem": true
            }
        ]
    },
    "toggle": {
        "activeTextColor": "#251C93",
        "activeBackgroundColor": "#FFF",
        "backgroundColor": "#251C93",
        "textColor": "#fff",
        "metric": "Metric",
        "imperial": "Imperial"
    }
},

Example of a valid bodyMeasurementsWeb - current_weight

{
    "type": "bodyMeasurementsWeb",
    "stepId": "body_measurements_current_weight",
    "currentWeightKey": "current_weight",
    "backgroundColor": "#ECEAFF",
    "textColor": "#14191D",
    "ctaText": "Continue",
    "ctaColor": "#FFF",
    "ctaBackgroundColor": "#251C93",
    "title": "Your current weight",
    "inputPlaceholderColor": "#BBB4FF",
    "inputTextColor": "#251C93",
    "tabs": {
        "kg": [
            {
                "placeholder": "Current weight",
                "inputSuffix": "kg",
                "toggleKey": "kg",
                "isMetricSystem": true
            }
        ],
        "lbs": [
            {
                "placeholder": "Current weight",
                "inputSuffix": "lbs",
                "toggleKey": "lbs",
                "isMetricSystem": false
            }
        ]
    },
    "toggle": {
        "activeTextColor": "#251C93",
        "activeBackgroundColor": "#FFF",
        "backgroundColor": "#251C93",
        "textColor": "#fff",
        "metric": "kg",
        "imperial": "lbs"
    }
},

Example of a valid bodyMeasurementsWeb - goal_weight

{
    "type": "bodyMeasurementsWeb",
    "stepId": "body_measurements_goal_weight",
    "currentWeightKey": "goal_weight",
    "backgroundColor": "#ECEAFF",
    "textColor": "#14191D",
    "ctaText": "Continue",
    "ctaColor": "#FFF",
    "ctaBackgroundColor": "#251C93",
    "title": "Your goal weight",
    "inputPlaceholderColor": "#BBB4FF",
    "inputTextColor": "#251C93",
    "errorMessage": "Your goal weight is higher than your current weight. Please make sure to enter these correctly.",
    "tabs": {
        "kg": [
            {
                "placeholder": "Goal weight",
                "inputSuffix": "kg",
                "toggleKey": "kg",
                "isMetricSystem": true
            }
        ],
        "lbs": [
            {
                "placeholder": "Goal weight",
                "inputSuffix": "lbs",
                "toggleKey": "lbs",
                "isMetricSystem": false
            }
        ]
    },
    "toggle": {
        "activeTextColor": "#251C93",
        "activeBackgroundColor": "#FFF",
        "metric": "kg",
        "imperial": "lbs",
        "backgroundColor": "#251C93",
        "textColor": "#fff"
    }
},

Key	Notes
type	bodyMeasurementsWeb
stepId	Unique id of the step
title	The main title on the step
currentWeightKey	Unique id of the measurement. It supports 3 keys: current_height - current_weight - goal_weight
backgroundColor	The page’s background color
textColor	The text color on the page.
ctaText	The main button text: Continue
ctaColor	The text color of the main button.
ctaBackgroundColor	The text background color of the main button.
inputTextColor	The text color of the input(s).
inputPlaceholderColor	The placeholders color.
toggle	Holds the data of the toggle on the page "toggle": {     "activeTextColor": "#251C93",     "activeBackgroundColor": "#FFF",     "backgroundColor": "#251C93",     "textColor": "#fff",     "metric": "kg",     "imperial": "lbs" } activeTextColor: The color of the active toggle. metric and imperial: Hold the text of the different systems of the toggle. If "mertic": "Metric" and "imperial": "Imperial"
tabs	The tabs hold the data of each input:   "tabs": {     "kg": [         {             "placeholder": "Current weight",             "inputSuffix": "kg",             "toggleKey": "kg",             "isMetricSystem": true         }     ],     "lbs": [         {             "placeholder": "Current weight",             "inputSuffix": "lbs",             "toggleKey": "lbs",             "isMetricSystem": false         }     ] }, OR "Imperial": [   {       "placeholder": "Current height",       "inputSuffix": "ft",       "toggleKey": "Imperial",       "isMetricSystem": false   },   {       "placeholder": "Current height",       "inputSuffix": "in",       "toggleKey": "Imperial",       "isMetricSystem": false   }   ], "Metric": [   {       "placeholder": "Current height",       "inputSuffix": "cm",       "toggleKey": "Metric",       "isMetricSystem": true   } ] Note that the keys in tabs must be the same ones defined in the mertic and imperial keys in toggle
errorMessage	This is an error message that’s supported only in the goal_weight step. It shows when the user enters a goal_weight higher than current_weight Example: Your goal weight is higher than your current weight. Please make sure to enter these correctly